<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jq.js"></script>
    <style>
        table{
            border: 1px solid;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .td1,.td3,.td4,.td6,.td7{
            width: 100px;
        }
        .td2,.td5{
            width: 200px;
        }
        .tr2{
            height: 100px;
            line-height: 100px;
        }
        .tr3{
            height: 50px;
            line-height: 50px;
        }
        img{
            width: 100%;
        }
        .tr3 .td7{
            background-color: red;
            color: white;
        }
        .tr3 .td6{
            color: red;
        }
        .tr3 .td4 span{
            color: red;
        }
    </style>
</head>
<body>
    <table class="tab1"> 
    </table>
    <table class="tab2">

    </table>
</body>
<script src="./data.js"></script>
<script>
    $(function(){
      var tr1 =  $(
          "<tr class='tr1'>"+
            ' <td>'+'<input type="checkbox" class="box1">'+'</td>'+
            '<td class="td1">全选</td>'+
            '<td class="td2">产品信息</td>'+
            '<td class="td3">规格</td>'+
            '<td class="td4">单价（元）</td>'+
            '<td class="td5">数量</td>'+
            '<td class="td6">小计</td>'+
            '<td class="td7">操作</td>'
            +"</tr>"+

            "<tr class='tr1'>"+
            ' <td>'+'<input type="checkbox" class="box2">'+'</td>'+
            '<td class="td1">'+'<img src=https:'+data[0].image+'>'+'</td>'+
            '<td class="td2">'+data[0].name+'</td>'+
            '<td class="td3"></td>'+
            '<td class="td4">￥'+'<span>'+data[0].price+'</span>'+'</td>'+
            '<td class="td5"> '+'<button class="jian">'+'-'+'</button>'+'<span>'+'1'+'</span>'
                +'<button class="jia">'+'+'+'</button>'+'</td>'+
            '<td class="td6">￥'+'<span class="xiaoji">'+data[0].price+'</span>'+'</td>'+
            '<td class="td7">移入收藏'+'<br>'+'删除'+'</td>'
            +"</tr>"+
                
            "<tr class='tr1'>"+
            ' <td>'+'<input type="checkbox" class="box3">'+'</td>'+
            '<td class="td1">'+'<img src=https:'+data[1].image+'>'+'</td>'+
            '<td class="td2">'+data[1].name+'</td>'+
            '<td class="td3"></td>'+
            '<td class="td4">￥'+'<span>'+data[1].price+'</span>'+'</td>'+
            '<td class="td5"> '+'<button class="jian">'+'-'+'</button>'+'<span>'+'1'+'</span>'+'<button class="jia">'+'+'+'</button>'+'</td>'+
            '<td class="td6">￥'+'<span class="xiaoji">'+data[1].price+'</span>'+'</td>'+
            '<td class="td7">移入收藏'+'<br>'+'删除'+'</td>'
            +"</tr>"
           
            )
        $('.tab1').append(tr1);
        var tr3 = $( "<tr class='tr3'>"+
            ' <td>'+'<input type="checkbox" class="box4">'+'</td>'+
            '<td class="td1">全选</td>'+
            '<td class="td2">删除选中商品</td>'+
            '<td class="td3">移入收藏</td>'+
            '<td class="td4">已选商品'+'<span>'+'0'+'</span>'+'件</td>'+
            '<td class="td5">合集（不含运费）：</td>'+
            '<td class="td6">￥'+'0.00'+'</td>'+
            '<td class="td7">结算</td>'
            +"</tr>"
            )
            $('.tab2').append(tr3);
            $('.jia').click(function(){
           var num =($(this).siblings('span').text())*1; 
        //    console.log(num);
           num++;
           $(this).siblings('span').text(num);
           var price_ = ($(this).parent().siblings('.td4').children('span').text())*1;
           var prices_ = num*price_;
           console.log(prices_);
           $(this).parent().siblings('.td6').children('.xiaoji').text(prices_);
        })
        $('.jian').click(function(){
            var num = parseInt($(this).siblings('span').text());
            if(num > 1){
                num--;
            // console.log(num);
            $(this).siblings('span').text(num);
            var price_ = ($(this).parent().siblings('.td4').children('span').text())*1;
           var prices_ = num*price_;
           console.log(prices_);
           $(this).parent().siblings('.td6').children('.xiaoji').text(prices_);
            }   
        })
        // console.log($('.box1'));
        // console.log($('.box1')[0]);
      //复选框选中操作
      function fn(i){
        $(i).click(function(){
                if($(i)[0].checked == false){
                $(':checkbox').prop('checked',false); 
            } else  if($(i)[0].checked == true) {
                $(':checkbox').prop('checked',true); 
            }
            
        })

      }
        fn('.box1');
        fn('.box4');
        function tn(i){
            $(i).click(function(){
           if($('.box2')[0].checked == true && $('.box3')[0].checked == true ){
            $(':checkbox').prop('checked',true); 
           }else{
            $('.box1').prop('checked',false); 
            $('.box4').prop('checked',false); 
           }
       })
        }
       tn('.box2');
       tn('.box3');  
    })
</script>
</html>